<template>
	<view class="product-marketing">
		<view class="qrcode-box">
			<view class="x-center">
				<image class="qrcode-icon" src="../../static/car-qrcode.png"></image>
				<view class="qrcode-icon-input-box">
					<view class="scan-input-box">
						<van-icon class="scan-icon" name="scan" @click.stop="ChooseImage" />
						<input class="scan-input" type="text" v-model="plateNum" disabled placeholder="扫描或填写车牌号"
							placeholder-class="scan-input-placeholder" @click.stop="openPlate">
						<view class="line"></view>
					</view>

					<button class="search-btn" @click.stop="searchPlate">查询</button>
				</view>
			</view>

			<!-- 历史查询记录 -->
			<view class="history-search-record-box" v-if="lsnSearchHistoryList.length > 0">
				<view class="history-search-title">
					<view class="history-search-text">历史搜索</view>
					<van-icon class="delete-history-search-icon" name="delete-o" @click.stop="clearSearchHistory" />
				</view>
				<view class="history-search-record">
					<view class="history-search-item" v-for="(item, index) in lsnSearchHistoryList" :key="index"
						@click.stop="handleClickHistoryLsn(item)">
						{{item}}
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义产品配置 -->
		<view class="cus-product-config" @click.stop="goCusProductConfig">自定义产品配置</view>

		<!-- 引用车牌组件 -->
		<plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>
	</view>
</template>

<script>
	import plateNumber from '@/components/plate-number/plateNumber.vue';
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				plateNum: "",
				carLsn: "",
				lsnSearchHistoryList: [],
			}
		},
		components: {
			plateNumber
		},
		onShow() {
			const lsnCache = uni.getStorageSync("lsnCache");
			if (lsnCache) {
				this.lsnSearchHistoryList = lsnCache;
			}
			//初始化
			this.$refs.plate.init();
		},
		onLoad() {

		},
		onHide() {
			//恢复初始化
			this.plateNum = '';
		},
		methods: {
			/**
			 * @desc 车牌选择关闭和打开
			 */
			showOrHide(falg) {
				console.log('falg', falg);
				if (falg) {
					this.chartShow = false;
				} else {
					this.chartShow = true;
				}
			},
			openPlate() {
				this.$refs.plate.show();
			},
			searchPlate() {
				const lsnCache = uni.getStorageSync("lsnCache");
				//输入了正确的车牌才执行请求
				if (this.plateNum.length > 6) {
					this.$refs.plate.close();
					getApp().showLoading();
					console.log('this.plateNum', this.plateNum);
					if (lsnCache) {
						let searchIndex = lsnCache.indexOf(this.plateNum);
						if (lsnCache.length < 10) {
							if (searchIndex == -1) {
								lsnCache.unshift(this.plateNum);
							} else {
								lsnCache.splice(searchIndex, 1);
								lsnCache.unshift(this.plateNum);
							}
						} else {
							if (searchIndex == -1) {
								lsnCache.splice(lsnCache.length - 1, 1);
								lsnCache.unshift(this.plateNum);
							} else {
								lsnCache.splice(searchIndex, 1);
								lsnCache.unshift(this.plateNum);
							}
						}
						uni.setStorageSync("lsnCache", lsnCache);
						this.lsnSearchHistoryList = lsnCache;
					} else {
						let cache = [];
						cache.push(this.plateNum);
						uni.setStorageSync("lsnCache", cache);
						this.lsnSearchHistoryList = cache;
					}
					apiRqs._getProductTop(this.plateNum).then((res) => {
						console.log('查询结果', res);
						uni.hideLoading();
						if (res.code == 200) {
							console.log(res.data);
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.purchaseDate == "0001-01-01 00:00:00") {
								newData.purchaseDate = "-"
							}
							this.carLsn = this.plateNum;


							uni.setStorageSync("lsnData", newData);
							uni.navigateTo({
								url: "/packageA/workbench/product-marketing-detail?lsn=" + this.plateNum
							})
							this.plateNum = "";
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err);
					})

				} else {
					getApp().showToast("请输入正确的车牌号");
				}
			},
			// 上传图片
			ChooseImage(index) {
				let loginInfo = uni.getStorageSync("loginInfo");
				var that = this;
				uni.chooseImage({
					count: 1, //默认最多上传6张图片
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						console.log('tempFilePaths', tempFilePaths);
						getApp().showLoading();
						uni.uploadFile({
							url: getApp().globalData.websiteUrl +
								"/api/v1/LsnRecognition/LsnRecognition",
							filePath: tempFilePaths,
							name: 'files',
							header: {
								'Authorization': ('Bearer ' + loginInfo.token) || ''
							},
							formData: {
								'files': tempFilePaths
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								let res = JSON.parse(uploadFileRes.data);
								if (res.code == 200 && res.data.Lsn) {
									that.plateNum = res.data.Lsn;
									that.searchPlate();
								} else {
									getApp().showToast("请上传正确的车牌号照片!");
									return false;
								}
							}
						});


					}
				});
			},
			// 清空历史搜索记录
			clearSearchHistory() {
				uni.removeStorageSync("lsnCache");
				this.lsnSearchHistoryList = [];
			},
			// 点击历史搜索车牌查询
			handleClickHistoryLsn(item) {
				this.plateNum = item;
				this.searchPlate();
			},
			// 进入自定义产品配置界面
			goCusProductConfig() {
				uni.navigateTo({
					url: "/packageA/workbench/product-cus-config"
				})
			},

		},
	}
</script>

<style lang="less">
	page {
		background-color: #2A2D3A;
	}

	.product-marketing {
		.qrcode-box {
			display: flex;
			flex-direction: column;

			.x-center {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.qrcode-icon {
				width: 80px;
				height: 91px;
				margin-top: 100px;
			}

			.qrcode-icon-input-box {
				width: 90%;
				display: flex;
				align-items: center;
				margin-top: 40px;
				background-color: rgba(255, 255, 255, 0.12);
				filter: blur(4);
				border-radius: 4px;
				border: 1px solid rgba(255, 255, 255, 0.18);

				.scan-input-box {
					flex: 1;
					display: flex;
					align-items: center;
					background-color: transparent;
					padding: 5px 0px 5px 10px;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;

					.scan-icon {
						width: 26px;
						flex: 0 0 26px;
						font-size: 26px;
						color: #fff;
					}

					.scan-input {
						flex: 1;
						min-width: 0;
						height: 42px;
						background-color: transparent;
						font-size: 12px;
						color: #fff;
						padding: 0 10px;
						box-sizing: border-box;
					}

					.line {
						width: 1px;
						flex: 0 0 1px;
						height: 15px;
						background-color: #898A95;
					}

					.scan-input-placeholder {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.57);
					}
				}


				.search-btn {
					border: none;
					background-color: transparent;
					color: #64B8FF;
					font-size: 14px;
					width: 60px;
					flex: 0 0 60px;
					height: 53px;
					line-height: 53px;
					border-top-left-radius: 0px;
					border-bottom-left-radius: 0px;
					padding: 0 16px;

					&::after {
						border: none;
					}
				}
			}

			.history-search-record-box {
				width: 90%;
				margin-left: 5%;
				display: flex;
				flex-direction: column;
				margin-top: 20px;

				.history-search-title {
					font-size: 14px;
					color: rgba(255, 255, 255, 0.4);
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 10px;

					.delete-history-search-icon {
						font-size: 16px;
						margin-left: 10px;
					}
				}

				.history-search-record {
					margin-top: 3px;

					.history-search-item {
						display: inline-block;
						background-color: rgba(255, 255, 255, 0.12);
						filter: blur(4);
						font-size: 11px;
						color: rgba(255, 255, 255, 0.4);
						border-radius: 40px;
						padding: 5px 12px;
						box-sizing: border-box;
						align-self: baseline;
						margin-right: 12px;
						margin-top: 10px;
					}
				}
			}

		}

		.cus-product-config {
			position: absolute;
			bottom: 40px;
			left: 0;
			width: 100%;
			text-align: center;
			background: transparent;
			color: #71B5F9;
			font-size: 13px;
		}
	}
</style>
